---
layout: none
---
<html>
<head>
  <meta charset="utf-8">
  <title>Raster example</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="../raster2.css?v={{site.data.info.version}}">
</head>
<body>

  <r-grid columns=8 columns-s=4>
    <r-cell span=row><h1>Raster</h1></r-cell>

    <r-cell span=2 span-s=row>
      <br>
      <p>
        Raster is a simple typography &amp; grid system for building
        harmonious graphical websites.
      </p>
      <p>
        This document showcases a variety of features of Raster.
      </p>
      <p>
        Raster makes sure that text lines up across columns and provides
        some simple customization via CSS variables.
      </p>
    </r-cell>
    <r-cell span=5-6 span-s=1-2>
      <h4>Settings</h4>
      <r-grid columns=2 class="compact settings">
        <r-cell>Debug mode:     </r-cell><r-cell><span id="debug-mode-msg">On</span> (D)</r-cell>
        <r-cell>Baseline grid:  </r-cell><r-cell><span id="base-grid-msg">On</span> (G)</r-cell>
        <r-cell>Size mode:      </r-cell><r-cell><span id="size-mode-msg">Constant</span> (S)</r-cell>
        <r-cell>Inverted colors:</r-cell><r-cell><span id="inverted-msg">Off</span> (I)</r-cell>
      </r-grid>
    </r-cell>
    <r-cell span=2>
      <h4>Values</h4>
      <r-grid columns=2 class="compact">
        <r-cell>Font size:  </r-cell><r-cell id="fontsize-value-msg">10 dp</r-cell>
        <r-cell>Baseline:   </r-cell><r-cell id="baseline-value-msg">10 dp</r-cell>
        <r-cell>Line height:</r-cell><r-cell id="lineheight-value-msg">10 dp</r-cell>
      </r-grid>
    </r-cell>

    <hr>

    <r-cell span=2>
      <h1>Level 1 heading</h1>
      <p>Paragraph<br>with two lines</p>
      <p>Paragraph<br>with two lines</p>
      <h2>Level 2 heading</h2>
      <p>Paragraph<br>with two lines</p>
      <p>Paragraph with one<br>two<br>three lines</p>
      <h3>Level 3 heading</h3>
      <p>Paragraph<br>with two lines</p>
      <h4>Level 4 heading</h4>
      <p>Paragraph<br>with two lines</p>
    </r-cell>
    <r-cell span=2>
      <p>Paragraph with one<br>two and<br>three lines</p>
      <p>Paragraph with one and<br>two lines</p>
      <p>Paragraph with one<br>two and<br>three lines</p>
      <p>Paragraph with one and<br>two lines</p>
      <p>Paragraph with one line</p>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
      <p>Paragraph with one<br>two and<br>three lines</p>
      <p>Paragraph with one<br>and two lines</p>
    </r-cell>
    <r-cell span=2>
      <h2>Level 2 heading</h2>
      <p>Paragraph with one and<br>two lines</p>
      <p>Paragraph with one and<br>two lines</p>
      <h1>Level 1 heading</h1>
      <p>Paragraph with one and<br>two lines</p>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
      <p>Paragraph with one line</p>
      <h3>Level 3 heading</h3>
      <p>Paragraph with one<br>and two lines</p>
    </r-cell>
    <r-cell span=2>
      <h3>Level 3 heading</h3>
      <p>Paragraph with one and<br>two lines</p>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
      <p>Paragraph with one and<br>two lines</p>
      <p>Paragraph with one<br>two and<br>three lines</p>
      <h5>Level 5 heading</h5>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
    </r-cell>

    <hr>

    <r-cell span=2>
      <h1>Level 1 heading</h1>
      <h1>Level 1 heading</h1>
      <p>Paragraph with one line</p>
    </r-cell>
    <r-cell span=2>
      <h1>Level 1 heading</h1>
      <h2>Level 2 heading</h2>
      <p>Paragraph with one<br>and two lines</p>
    </r-cell>
    <r-cell span=2>
      <h1>Level 1 heading</h1>
      <h3>Level 3 heading</h3>
      <p>Paragraph with one<br>two and<br>three lines</p>
    </r-cell>
    <r-cell span=2>
      <h1>Level 1 heading</h1>
      <h4>Level 4 heading</h4>
      <p>Paragraph with one<br>two and<br>three lines</p>
    </r-cell>

    <r-cell span=row>&nbsp;</r-cell>

    <r-cell span=2>
      <h2>Level 2 heading</h2>
      <h1>Level 1 heading</h1>
      <p>Paragraph with one line</p>
    </r-cell>
    <r-cell span=2>
      <h2>Level 2 heading</h2>
      <h2>Level 2 heading</h2>
      <p>Paragraph with one<br>and two lines</p>
    </r-cell>
    <r-cell span=2>
      <h2>Level 2 heading</h2>
      <h3>Level 3 heading</h3>
      <p>Paragraph with one<br>two and<br>three lines</p>
    </r-cell>
    <r-cell span=2>
      <h2>Level 2 heading</h2>
      <h4>Level 4 heading</h4>
      <p>Paragraph with one<br>two and<br>three lines</p>
    </r-cell>

    <r-cell span=row>&nbsp;</r-cell>

    <r-cell span=2>
      <h3>Level 3 heading</h3>
      <h1>Level 1 heading</h1>
      <p>Paragraph with one line</p>
    </r-cell>
    <r-cell span=2>
      <h3>Level 3 heading</h3>
      <h2>Level 2 heading</h2>
      <p>Paragraph with one<br>and two lines</p>
    </r-cell>
    <r-cell span=2>
      <h3>Level 3 heading</h3>
      <h3>Level 3 heading</h3>
      <p>Paragraph with one<br>two and<br>three lines</p>
    </r-cell>
    <r-cell span=2>
      <h3>Level 3 heading</h3>
      <h4>Level 4 heading</h4>
      <p>Paragraph with one<br>two and<br>three lines</p>
    </r-cell>

    <r-cell span=row>&nbsp;</r-cell>

    <r-cell span=2>
      <h4>Level 4 heading</h4>
      <h1>Level 1 heading</h1>
      <p>Paragraph with one line</p>
    </r-cell>
    <r-cell span=2>
      <h4>Level 4 heading</h4>
      <h2>Level 2 heading</h2>
      <p>Paragraph with one<br>and two lines</p>
    </r-cell>
    <r-cell span=2>
      <h4>Level 4 heading</h4>
      <h3>Level 3 heading</h3>
      <p>Paragraph with one<br>two and<br>three lines</p>
    </r-cell>
    <r-cell span=2>
      <h4>Level 4 heading</h4>
      <h4>Level 4 heading</h4>
      <p>Paragraph with one<br>two and<br>three lines</p>
    </r-cell>

    <hr>

    <r-cell span=2>
      <h1 class="single-line">Level 1 singĺỵ line heading</h1>
      <h1 class="single-line">Level 1 singĺỵ line heading</h1>
      <p>Paragraph with one line</p>
    </r-cell>
    <r-cell span=2>
      <h1 class="single-line">Level 1 singĺỵ line heading</h1>
      <h2 class="single-line">Level 2 singĺỵ line heading</h2>
      <p>Paragraph with one<br>and two lines</p>
    </r-cell>
    <r-cell span=2>
      <h1 class="single-line">Level 1 singĺỵ line heading</h1>
      <h3 class="single-line">Level 3 singĺỵ line heading</h3>
      <p>Paragraph with one<br>two and<br>three lines</p>
    </r-cell>
    <r-cell span=2>
      <h1 class="single-line">Level 1 singĺỵ line heading</h1>
      <h4 class="single-line">Level 4 singĺỵ line heading</h4>
      <p>Paragraph with one<br>two and<br>three lines</p>
    </r-cell>

    <r-cell span=row>&nbsp;</r-cell>

    <r-cell span=2>
      <h2 class="single-line">Level 2 singĺỵ line heading</h2>
      <h1 class="single-line">Level 1 singĺỵ line heading</h1>
      <p>Paragraph with one line</p>
    </r-cell>
    <r-cell span=2>
      <h2 class="single-line">Level 2 singĺỵ line heading</h2>
      <h2 class="single-line">Level 2 singĺỵ line heading</h2>
      <p>Paragraph with one<br>and two lines</p>
    </r-cell>
    <r-cell span=2>
      <h2 class="single-line">Level 2 singĺỵ line heading</h2>
      <h3 class="single-line">Level 3 singĺỵ line heading</h3>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
    </r-cell>
    <r-cell span=2>
      <h2 class="single-line">Level 2 singĺỵ line heading</h2>
      <h4 class="single-line">Level 4 singĺỵ line heading</h4>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
    </r-cell>

    <r-cell span=row>&nbsp;</r-cell>

    <r-cell span=2>
      <h3 class="single-line">Level 3 singĺỵ line heading</h3>
      <h1 class="single-line">Level 1 singĺỵ line heading</h1>
      <p>Paragraph with one line</p>
    </r-cell>
    <r-cell span=2>
      <h3 class="single-line">Level 3 singĺỵ line heading</h3>
      <h2 class="single-line">Level 2 singĺỵ line heading</h2>
      <p>Paragraph with one<br>and two lines</p>
    </r-cell>
    <r-cell span=2>
      <h3 class="single-line">Level 3 singĺỵ line heading</h3>
      <h3 class="single-line">Level 3 singĺỵ line heading</h3>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
    </r-cell>
    <r-cell span=2>
      <h3 class="single-line">Level 3 singĺỵ line heading</h3>
      <h4 class="single-line">Level 4 singĺỵ line heading</h4>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
    </r-cell>

    <r-cell span=row>&nbsp;</r-cell>

    <r-cell span=2>
      <h4 class="single-line">Level 4 singĺỵ line heading</h4>
      <h1 class="single-line">Level 1 singĺỵ line heading</h1>
      <p>Paragraph with one line</p>
    </r-cell>
    <r-cell span=2>
      <h4 class="single-line">Level 4 singĺỵ line heading</h4>
      <h2 class="single-line">Level 2 singĺỵ line heading</h2>
      <p>Paragraph with one<br>and two lines</p>
    </r-cell>
    <r-cell span=2>
      <h4 class="single-line">Level 4 singĺỵ line heading</h4>
      <h3 class="single-line">Level 3 singĺỵ line heading</h3>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
    </r-cell>
    <r-cell span=2>
      <h4 class="single-line">Level 4 singĺỵ line heading</h4>
      <h4 class="single-line">Level 4 singĺỵ line heading</h4>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
    </r-cell>

    <hr>

    <r-cell span=2>
      <h4>Level 4 heading</h4>
      <h1>Level 1 heading</h1>
      <p>single line</p>

      <h4>Level 4 heading</h4>
      <h1 class="single-line">Level 1 singĺỵ line</h1>
      <p>single line</p>

      <h4 class="single-line">Level 4 singĺỵ line</h4>
      <h1 class="single-line">Level 1 singĺỵ line</h1>
      <p>single line</p>

      <h4 class="single-line">Level 4 singĺỵ line</h4>
      <h1>Level 1 header</h1>
      <p>single line</p>
    </r-cell>
    <r-cell span=2>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line<br>
      single line
    </r-cell>

    <r-cell span=2>
      <h1>Level 1 heading</h1>
      <h2>Level 2 heading</h2>
      <h3>Level 3 heading</h3>
      <h4>Level 4 heading</h4>
      <h1 class="single-line">Level 1 singĺỵ line</h1>
      <h2 class="single-line">Level 2 singĺỵ line</h2>
      <h3 class="single-line">Level 3 singĺỵ line</h3>
      <h4 class="single-line">Level 4 singĺỵ line</h4>
      <p>Paragraph with one<br>two<br>three<br>four and<br>five lines</p>
    </r-cell>
    <r-cell span=2>
      <h4>Level 4 heading</h4>
      <h3>Level 3 heading</h3>
      <h2>Level 2 heading</h2>
      <h1>Level 1 heading</h1>
      <h4 class="single-line">Level 4 singĺỵ line</h4>
      <h3 class="single-line">Level 3 singĺỵ line</h3>
      <h2 class="single-line">Level 2 singĺỵ line</h2>
      <h1 class="single-line">Level 1 singĺỵ line</h1>
      <p>Paragraph with one<br>and two lines</p>
    </r-cell>

    <hr>

    <r-cell span=2>
      <h1 class="single-line">Level 1 singĺỵ line</h1>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
      <h1 class="single-line">Level 1 singĺỵ line</h1>
      Plain text
      <h3 class="single-line">Level 3 singĺỵ line</h3>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
      <h3 class="single-line">Level 3 singĺỵ line</h3>
      Plain text<br>
      Plain text<br>
      Plain text<br>
      Plain text
    </r-cell>
    <r-cell span=2>
      <h2 class="single-line">Level 2 singĺỵ line</h2>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
      <h2 class="single-line">Level 2 singĺỵ line</h2>
      Plain text<br>
      Plain text<br>
      Plain text
      <h4 class="single-line">Level 4 singĺỵ line</h4>
      <p>Paragraph with one<br>and two lines</p>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
      <h4 class="single-line">Level 4 singĺỵ line</h4>
      Plain text
    </r-cell>

    <hr>

    <r-cell span=2>
      <h1>Level 1 heading</h1>
      <h2>Level 2 heading</h2>
      <p>Paragraph with one<br>two and<br>three lines</p>
    </r-cell>
    <r-cell span=2>
      <h3>Level 3 heading</h3>
      <h4>Level 4 heading</h4>
      <p>Paragraph with one line</p>
      <p>Paragraph with one<br>two and<br>three lines</p>
    </r-cell>
    <r-cell span=2>
      <p>
        Paragraph with<br>line<br>line<br>line<br>line<br>line<br>
        line<br>line<br>line
      </p>
    </r-cell>
    <r-cell span=2>
      <h1>Level 1 heading</h1>
      <h2>Level 2 heading</h2>
      <h3>Level 3 heading</h3>
      <p>Paragraph with one line</p>
    </r-cell>

    <hr>

    <r-cell span=2>
      <h1 class="single-line">Level 1 singĺỵ line</h1>
      <h2 class="single-line">Level 2 singĺỵ line</h2>
      <p>Paragraph with one<br>two and<br>three lines</p>
    </r-cell>
    <r-cell span=2>
      <h3 class="single-line">Level 3 singĺỵ line</h3>
      <h4 class="single-line">Level 4 singĺỵ line</h4>
      <p>Paragraph with one line</p>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
    </r-cell>
    <r-cell span=2>
      <p>
        Paragraph with<br>line<br>line<br>line<br>line<br>line<br>
        line<br>line<br>line<br>line
      </p>
    </r-cell>
    <r-cell span=2>
      <h1 class="single-line">Level 1 singĺỵ line</h1>
      <h2 class="single-line">Level 2 singĺỵ line</h2>
      <h3 class="single-line">Level 3 singĺỵ line</h3>
      <p>Paragraph with one line</p>
    </r-cell>

    <hr>

    <r-cell span=2 span-s=row>
      <h1>Level 1</h1>
      <h2>Level 2</h2>
      <h3>Level 3</h3>
      <h4>Level 4</h4>
      <h5>Level 5</h5>
    </r-cell>
    <r-cell span=3.. span-s=row>
      <h1 class="large">Level 1 header<br>large size</h1>
      <h1 class="xlarge">Level 1 header<br>xlarge size</h1>
      <h1 class="xxlarge">Level 1 header<br>xxlarge size</h1>
      <h1 class="xxxlarge">Level 1 header<br>xxxlarge size</h1>
      <h1 class="xxxlarge single-line">Single-line xxxlarge size</h1>
    </r-cell>

    <hr>

    <r-cell span=2>
      <h1>Level 1<br>heading<br>wråpping<br>Åuĺtipĺe<br>lines</h1>
      <p>Paragraph with one<br>two<br>three<br>four and<br>five lines</p>
    </r-cell>
    <r-cell span=2>
      <p>Paragraph with one<br>two and<br>three lines</p>
      <p>Paragraph with one and<br>two lines</p>
      <p>Paragraph with one<br>two and<br>three lines</p>
      <p>Paragraph with one line</p>
      <p>Paragraph with one<br>two and<br>three lines</p>
    </r-cell>
    <r-cell span=2>
      <h2>Level 2 heading that wraps over Åuĺtipĺe lines and keeps on wrapping</h2>
      <p>Paragraph with one and<br>two lines</p>
      <h3>
        Level 3 heading that wraps over Åuĺtipĺe lines and keeps on wrapping
        and wrapping and wrapping and wrapping
      </h3>
      <p>Paragraph with one line</p>
    </r-cell>
    <r-cell span=2>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
      <p>Paragraph with one line</p>
      <p>Paragraph with one line</p>
      <h4>
        Level 4 heading that wraps over Åuĺtipĺe lines and keeps on wrapping
        and wrapping and wrapping and wrapping
      </h3>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
      <p>Paragraph with one and<br>two lines</p>
    </r-cell>

    <hr>
    <r-cell span=row class=h3>Images</r-cell>

    <r-cell span=2>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
      <p>Paragraph with one<br>two<br>three<br>four and<br>five lines</p>
    </r-cell>
    <r-cell span=2>
      <img src="image1.jpg" class="h-8 top" />
      <p>Contain and align to top</p>
    </r-cell>
    <r-cell span=2>
      <img src="image1.jpg" class="h-8 bottom right" />
      <p>Contain and align to bottom right</p>
    </r-cell>
    <r-cell span=2>
      <img src="image1.jpg" class="h-8 fill" />
      <p>Fill</p>
    </r-cell>

    <r-cell span=3.. span-s=row><hr></r-cell>

    <r-cell span=2>
      <p>Paragraph with one<br>two<br>three<br>four and<br>five lines</p>
      <p>Paragraph with one<br>two<br>three<br>four and<br>five lines</p>
    </r-cell>

    <r-cell span=2>
      <p>Fill from bottom left</p>
      <img src="image1.jpg" class="h-8 fill bottom left" />
      <p>Fill from bottom left</p>
    </r-cell>

    <r-cell span=2>
      <p>Contain and align to top</p>
      <img src="image1.jpg" class="h-8 top" />
      <p>Contain and align to top</p>
    </r-cell>

    <r-cell span=2 title="img is only child (no margins)">
      <img src="image1.jpg" width="100%" class="h-8 fill" />
    </r-cell>

    <hr>
    <r-cell span=row class=h3>Flow columns</r-cell>

    <r-cell span=row flow-cols=4 flow-cols-s=2>
      <p>A third of the distance across the Beach, the meadow ends and sand
      begins. This slopes gradually up for another third of the distance, to
      the foot of the sand hills, which seem tumbled into their places by some
      mighty power, sometimes three tiers of them deep, sometimes two, and
      sometimes only one. A third of the distance across the Beach, the meadow ends and sand begins.
      </p><p>
      This slopes gradually up for another third of the distance, to
      the foot of the sand hills, which seem tumbled into their places by some
      mighty power, sometimes three tiers of them deep, sometimes two, and
      sometimes only one.
      </p><p>The outline of this inner shore is most irregular, curving and bending
      in and out and back upon itself, making coves and points and creeks and
      channels, and often pushing out in flats with not water enough on them
      at low tide to wet your ankles.
      </p><p>
      A third of the distance across the Beach, the meadow ends and sand
      begins. This slopes gradually up for another third of the distance, to
      the foot of the sand hills, which seem tumbled into their places by some
      mighty power, sometimes three tiers of them deep, sometimes two, and
      sometimes only one.
      </p>
    </r-cell>

    <r-cell span=row><br></r-cell>

    <r-cell span=3-8 span-s=2-4 flow-cols=3 flow-cols-s=2>
      <p>A third of the distance across the Beach, the meadow ends and sand
      begins. This slopes gradually up for another third of the distance, to
      the foot of the sand hills, which seem tumbled into their places by some
      mighty power, sometimes three tiers of them deep, sometimes two, and
      sometimes only one. A third of the distance across the Beach, the meadow ends and sand begins.
      </p><p>
      This slopes gradually up for another third of the distance, to
      the foot of the sand hills, which seem tumbled into their places by some
      mighty power, sometimes three tiers of them deep, sometimes two, and
      sometimes only one.
      </p><p>The outline of this inner shore is most irregular, curving and bending
      in and out and back upon itself, making coves and points and creeks and
      channels, and often pushing out in flats with not water enough on them
      at low tide to wet your ankles.
      </p><p>
      A third of the distance across the Beach, the meadow ends and sand
      begins. This slopes gradually up for another third of the distance, to
      the foot of the sand hills, which seem tumbled into their places by some
      mighty power, sometimes three tiers of them deep, sometimes two, and
      sometimes only one.
      </p>
    </r-cell>

    <r-cell span=row><br></r-cell>

    <r-cell span=5-8 span-s=3-4 flow-cols=2 flow-cols-s=1>
      <p>A third of the distance across the Beach, the meadow ends and sand
      begins. This slopes gradually up for another third of the distance, to
      the foot of the sand hills, which seem tumbled into their places by some
      mighty power, sometimes three tiers of them deep, sometimes two, and
      sometimes only one. A third of the distance across the Beach, the meadow ends and sand begins.
      </p><p>
      This slopes gradually up for another third of the distance, to
      the foot of the sand hills, which seem tumbled into their places by some
      mighty power, sometimes three tiers of them deep, sometimes two, and
      sometimes only one.
      </p><p>The outline of this inner shore is most irregular, curving and bending
      in and out and back upon itself, making coves and points and creeks and
      channels, and often pushing out in flats with not water enough on them
      at low tide to wet your ankles.
      </p><p>
      A third of the distance across the Beach, the meadow ends and sand
      begins. This slopes gradually up for another third of the distance, to
      the foot of the sand hills, which seem tumbled into their places by some
      mighty power, sometimes three tiers of them deep, sometimes two, and
      sometimes only one.
      </p>
    </r-cell>

    <hr>
    <r-cell span=row class=h3>Horizontal rules</r-cell>

    <r-cell span=2>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
      <hr>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
    </r-cell>
    <r-cell span=2>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
      <p>Paragraph with one<br>two<br>three and<br>four lines</p>
    </r-cell>
    <r-cell span=2>
      <p>Paragraph with one line</p>
      <hr>
      <p>Paragraph with one line</p>
      <hr>
      <p>Paragraph with one and<br>two lines</p>
    </r-cell>
    <r-cell span=2>
      <p>Paragraph with one and<br>two lines</p>
      <p>Paragraph with one line</p>
      <hr>
      <p>Paragraph with one and<br>two lines</p>
    </r-cell>

    <hr>
    <hr>
    <hr>

    <r-cell span=2><hr></r-cell>
    <r-cell span=2><hr></r-cell>
    <r-cell span=2><hr></r-cell>
    <r-cell span=2><hr></r-cell>

    <r-cell span=2><hr>hr with text</r-cell>
    <r-cell span=2>text with hr<hr></r-cell>
    <r-cell span=2><hr><p>hr with p</p></r-cell>
    <r-cell span=2><p>p with hr</p><hr></r-cell>

    <r-cell span=row><hr><p>hr with p</p></r-cell>
    <r-cell span=row><hr><p>hr with p (multiple entries tests fractional baseline shift)</p></r-cell>

    <r-cell span=row><p>p with hr</p><hr></r-cell>
    <r-cell span=row><p>p with hr</p><hr></r-cell>
    <r-cell span=row><p>p with hr</p><hr></r-cell>

    <hr>
    <r-cell span=row class=h3>Lists</r-cell>

    <r-cell span=2>
      <h4>Unordered list</h4>
      <p>Leading paragraph</p>
      <ul>
        <li>Unordered list item<br>spanning multiple<br>lines</li>
        <li>Unordered list item<br>spanning multiple<br>lines</li>
        <li>Unordered list item<br>spanning multiple<br>lines</li>
      </ul>
      <h4>Compact unordered list</h4>
      <ul class="compact">
        <li>Unordered list item</li>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
      </ul>
      <p>Paragraph with one and<br>two lines</p>
    </r-cell>
    <r-cell span=2>
      <h4>Ordered list</h4>
      <p>Leading paragraph</p>
      <ol>
        <li>Ordered list item<br>spanning multiple<br>lines</li>
        <li>Ordered list item<br>spanning multiple<br>lines</li>
        <li>Ordered list item<br>spanning multiple<br>lines</li>
      </ol>
      <h4>Compact ordered list</h4>
      <ol class="compact">
        <li>Ordered list item</li>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
      </ol>
      <p>Paragraph with one and<br>two lines</p>
    </r-cell>
    <r-cell span=2>
      <h4>Ordered &amp; unordered lists</h4>
      <ol>
        <li>Ordered list item</li>
        <li>
          Plain text
          <ul>
            <li>Unordered list item</li>
            <li>Unordered list item</li>
            <li>Unordered list item</li>
          </ul>
        </li>
        <li>
          <p>Paragraph</p>
          <ol>
            <li>Ordered list item</li>
            <li>Ordered list item</li>
            <li>Ordered list item</li>
          </ol>
        </li>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
      </ol>

      <h4>Task list</h4>
      <p>Leading paragraph</p>
      <ul>
        <li class="task-list-item"><input type="checkbox" disabled>Buy milk</li>
        <li class="task-list-item"><input type="checkbox" disabled checked>Try Raster</li>
        <li class="task-list-item"><input type="checkbox" disabled>Call Mom</li>
        <li>Regular list item</li>
      </ul>
    </r-cell>
    <r-cell span="2">
      <h4>Ordered list with custom start</h4>
      <p>Paragraph</p>
      <ol start=100>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
        <li>
          <p>Paragraph</p>
          <ul>
            <li>Unordered list item</li>
            <li>Unordered list item</li>
            <li>Unordered list item</li>
          </ul>
        </li>
      </ol>
      <h4>Compact ordered list with custom start</h4>
      <p>Paragraph</p>
      <ol start=32 class=compact>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
        <li>
          <p>Paragraph</p>
          <ol class=compact>
            <li>Ordered list item</li>
            <li>Ordered list item</li>
            <li>Ordered list item</li>
          </ol>
        </li>
      </ol>
    </r-cell>




    <hr>
    <r-cell span=2 span-s=row>
      <h3>Code</h3>
      <p>
        The variable <code>--fontMono</code> can be set to change the font
        family used for monospace text.
        CSS classes <code>.code</code> and <code>.monospace</code> can
        be use to enable monospace text on any element.
      </p>
      <p>
        <tt>Here is a really long single line that should wrap when the column is narrow</tt>
      </p>
    </r-cell>

    <r-cell span=4 span-s=row>
      <h4>&lt;code&gt;&lt;pre&gt;</h4>
      <pre><code><em class=opacity6>// CopyN copies n bytes (or until an error) from src to dst.
// It returns the number of bytes copied and the earliest
// error encountered while copying.
// On return, written == n if and only if err == nil.
//
// If dst implements the ReaderFrom interface,
// the copy is implemented using it.
//</em>
<b>func</b> CopyN(dst Writer, src Reader, n int64) (written int64, err error) {
  written, err = Copy(dst, LimitReader(src, n))
  <b>if</b> written == n {
    <b>return</b> n, nil
  }
  <b>if</b> written < n && err == nil {
    // src stopped early; must have been EOF.
    err = EOF
  }
  <b>return</b>
}
      </code></pre>
    </r-cell>

    <r-cell span=2 span-s=row>
      <h4>Inline</h4>
      <p>
        <code>CopyN</code> copies n bytes (or until an error)
        from <code>src</code> to <code>dst</code>.
      </p><p>
        It returns the number of bytes copied and the earliest
        error encountered while copying.
      </p><p>
        On return, <code>written == n</code> <b>if
        and only if <code>err == nil</code>.</b>
      </p><p>
        If <code>dst</code> implements the <em class=code>ReaderFrom</em> interface,
        the copy is implemented using it.
      </p>
    </r-cell>



    <hr>
    <r-cell span=row class=h3>Tables</r-cell>
    <r-cell span=4>
      <p>Leading paragraph before a table of file types</p>
      <table>
        <thead>
          <tr><th>Header</th><th>Mime type</th>
              <th>Extensions</th><th>Description</th></tr>
        </thead>
        <tbody>
          <tr><td><code>89 50 4E 47 0D 0A 1A 0A</code></td><td>image/png</td>
              <td>png</td><td>PNG image</td></tr>
          <tr><td><code>47 49 46 38 39 61</code></td><td>image/gif</td>
              <td>gif</td><td>GIF image</td></tr>
          <tr><td><code>FF D8 FF</code></td><td>image/jpeg</td>
              <td>jpg jpeg</td><td>JPEG image</td></tr>
          <tr><td><code>4D 4D 00 2B</code></td><td>image/tiff</td>
              <td>tif tiff</td><td>TIFF image</td></tr>
          <tr><td><code>42 4D</code></td><td>image/bmp</td>
              <td>bmp</td><td>Bitmap image</td></tr>
          <tr><td><code>00 00 01 00</code></td><td>image/x-icon</td>
              <td>ico</td><td>Icon image</td></tr>
        </tbody>
      </table>
      <p>Trailing paragraph</p>
    </r-cell>

    <r-cell>
      <p>Paragraph line one<br>line two<br>line three<br>line four</p>
      <p>Paragraph line one<br>line two<br>line three<br>line four<br>
        line five<br>line six<br>line seven</p>
      <p>Paragraph line one<br>line two<br>line three<br>line four<br>
        line five<br>line six</p>
    </r-cell>

    <r-cell span=3 span-s=4>
      <p>Alignment demo. Table has <tt>class=w-full</tt></p>
      <table class=w-full>
      <thead>
        <tr><th>Column 1</th><th align="left">Column 2</th>
          <th align="center">Column 3</th><th align="right">Column 4</th></tr>
      </thead>
      <tbody>
        <tr><td>default</td><td align="left">left</td>
          <td align="center">center</td><td align="right">right</td></tr>
      </tbody>
      </table>
      <p>Paragraph line one<br>line two<br>line three<br>line four<br>
        line five<br>line six</p>
      <p>Paragraph line one<br>line two<br>line three<br>line four</p>
    </r-cell>


    <r-cell span=4>
      <table>
        <thead>
          <tr><th>Header</th><th>Mime type</th>
              <th>Extensions</th><th>Description</th></tr>
        </thead>
        <tbody>
          <tr><td><code>89 50 4E 47 0D 0A 1A 0A</code></td><td>image/png</td>
              <td>png</td><td>PNG image</td></tr>
          <tr><td><code>47 49 46 38 39 61</code></td><td>image/gif</td>
              <td>gif</td><td>GIF image</td></tr>
          <tr><td><code>FF D8 FF</code></td><td>image/jpeg</td>
              <td>jpg jpeg</td><td>JPEG image</td></tr>
          <tr><td><code>4D 4D 00 2B</code></td><td>image/tiff</td>
              <td>tif tiff</td><td>TIFF image</td></tr>
          <tr><td><code>42 4D</code></td><td>image/bmp</td>
              <td>bmp</td><td>Bitmap image</td></tr>
          <tr><td><code>00 00 01 00</code></td><td>image/x-icon</td>
              <td>ico</td><td>Icon image</td></tr>
        </tbody>
      </table>
      <table>
        <thead>
          <tr><th>Header</th><th>Mime type</th>
              <th>Extensions</th><th>Description</th></tr>
        </thead>
        <tbody>
          <tr><td><code>89 50 4E 47 0D 0A 1A 0A</code></td><td>image/png</td>
              <td>png</td><td>PNG image</td></tr>
          <tr><td><code>47 49 46 38 39 61</code></td><td>image/gif</td>
              <td>gif</td><td>GIF image</td></tr>
          <tr><td><code>FF D8 FF</code></td><td>image/jpeg</td>
              <td>jpg jpeg</td><td>JPEG image</td></tr>
          <tr><td><code>4D 4D 00 2B</code></td><td>image/tiff</td>
              <td>tif tiff</td><td>TIFF image</td></tr>
          <tr><td><code>42 4D</code></td><td>image/bmp</td>
              <td>bmp</td><td>Bitmap image</td></tr>
          <tr><td><code>00 00 01 00</code></td><td>image/x-icon</td>
              <td>ico</td><td>Icon image</td></tr>
        </tbody>
      </table>
      <p>Trailing paragraph</p>
    </r-cell>

    <r-cell>
      <p>Paragraph line one<br>line two<br>line three<br>line four</p>
      <p>Paragraph line one<br>line two<br>line three<br>line four<br>
        line five<br>line six<br>line seven</p>
      <p>Paragraph line one<br>line two<br>line three<br>line four</p>
      <p>Paragraph line one<br>line two<br>line three<br>line four</p>
      <p>Paragraph line one<br>line two<br>line three<br>line four</p>
    </r-cell>

    <r-cell>
      <h3>H3</h3>
      <table>
        <thead><tr><th>Mime type</th></tr></thead>
        <tbody>
          <tr><td>image/png</td></tr>
          <tr><td>image/gif</td></tr>
          <tr><td>image/jpeg</td></tr>
          <tr><td>image/tiff</td></tr>
        </tbody>
      </table>
      <h4>H4</h4>
      <table>
        <thead><tr><th>Mime type</th></tr></thead>
        <tbody>
          <tr><td>image/png</td></tr>
          <tr><td>image/gif</td></tr>
          <tr><td>image/jpeg</td></tr>
          <tr><td>image/tiff</td></tr>
        </tbody>
      </table>
      <p>Trailing paragraph</p>
    </r-cell>

    <r-cell>
      <img src="image1.jpg" class="h-5 fill" />
      <table>
        <thead><tr><th>Mime type</th></tr></thead>
        <tbody>
          <tr><td>image/png</td></tr>
          <tr><td>image/gif</td></tr>
          <tr><td>image/jpeg</td></tr>
          <tr><td>image/tiff</td></tr>
        </tbody>
      </table>
      <img src="image1.jpg" class="h-2 fill" />
      <table>
        <thead><tr><th>Mime type</th></tr></thead>
        <tbody>
          <tr><td>image/png</td></tr>
          <tr><td>image/gif</td></tr>
          <tr><td>image/jpeg</td></tr>
          <tr><td>image/tiff</td></tr>
        </tbody>
      </table>
      <p>Trailing paragraph</p>
    </r-cell>



  </r-grid>

  <!-- ---- internal only -- not part of raster ---- -->
  <script>(function(){

let ua = navigator.userAgent
if (ua.indexOf("Chrome/") != -1) {
  document.documentElement.classList.add('chrome')
} else if (ua.indexOf("Firefox/") != -1) {
  document.documentElement.classList.add('firefox')
}

let css = `
html {
  --pointer-move-line-color: #03f;
}
html.inverted {
  --pointer-move-line-color: #f3a;

  /*--background-color: #101214;
  --foreground-color-rgb: 250,255,240;*/

  /*--background-color: #131310;
  --foreground-color-rgb: 210,230,255;*/

  /*--background-color: #111;
  --foreground-color-rgb: 255,255,255;*/

  --background-color: #111;
  --foreground-color-rgb: 255,254,245;

  --foreground-color-a: 0.8;
  --base-grid-color1: rgba(240,155,255, 0.1);
  --base-grid-color2: rgba(240,155,255, 0.05);
}
html.size-mode-relative {
  --fontSize: calc(100vw / 80);
  --hrThickness: 0.17rem;
}
.settings c:nth-child(2n+2) {
  font-feature-settings:'ss02' 1;
  user-select:none;
}
.baselineBeacon {
  height: var(--baseline);
  overflow: hidden;
  display: none;
  position: absolute;
}
.pointerMoveLine {
  height: 1px;
  pointer-events: none;
  visibility: hidden;
  position: absolute;
  left:0; top:0; right:0;
  background: var(--pointer-move-line-color);
  transform: translate3d(0,0,0);
  opacity:0.4;
}
.pointerMoveLine.active { visibility:visible; }
.pointerMoveLine.pressed {
  opacity:0.8;
  box-shadow:
    0 1px 0 0 var(--pointer-move-line-color),
    0 -1px 0 0 var(--pointer-move-line-color);
}
`.trim()
let style = document.createElement('style')
style.appendChild(document.createTextNode(css))
document.head.appendChild(style)
let link = document.createElement('link')
link.rel = "stylesheet"
link.href = "../raster.debug.css"
document.head.appendChild(link)


let baselineBeacon = document.createElement('div')
baselineBeacon.className = 'baselineBeacon'
baselineBeacon.innerText = 'x'
document.body.appendChild(baselineBeacon)

function fmtnum(n) {
  let s = n.toFixed(2)
  if (s.substr(-3) == '.00') {
    s = s.substr(0, s.length-3)
  }
  return s
}

function setLabel(id, value) {
  let label = document.getElementById(id)
  label && (label.innerText = value)
}

let tapevent = 'PointerEvent' in window ? 'pointerdown' : 'click'

function bindTapableOption(msgname, fn) {
  let label = document.getElementById(msgname + '-msg')
  label && label.parentElement.addEventListener(tapevent, fn)
}

let baseline = 0

function updateComputedValueLabels() {
  let cs = getComputedStyle(baselineBeacon)
  baseline = parseFloat(cs.height)
  let fontSize = parseFloat(cs.fontSize)
  let lineHeight = parseFloat(cs.lineHeight)
  setLabel('baseline-value-msg', fmtnum(baseline) + ' dp')
  setLabel('fontsize-value-msg', fmtnum(fontSize) + ' dp')
  setLabel('lineheight-value-msg', fmtnum(lineHeight) + ' dp')
}

function updateDebugModeLabel() {
  let on = document.body.classList.contains('debug')
  setLabel('debug-mode-msg', on ? 'On' : 'Off')
}

function updateBaseGridLabel() {
  let on = document.body.classList.contains('show-base-grid')
  setLabel('base-grid-msg', on ? 'On' : 'Off')
  togglePointerLine(on)
}

function updateInvertedLabel() {
  let on = document.documentElement.classList.contains('inverted')
  setLabel('inverted-msg', on ? 'On' : 'Off')
}

function updateSizeModeLabel() {
  let rel = document.documentElement.classList.contains('size-mode-relative')
  setLabel('size-mode-msg', rel ? 'Viewport' : 'Constant')
}

function toggleDebugMode() {
  document.body.classList.toggle('debug')
  updateDebugModeLabel()
}

function toggleBaseGrid() {
  document.body.classList.toggle('show-base-grid')
  updateBaseGridLabel()
}

function toggleInvertedMode() {
  document.documentElement.classList.toggle('inverted')
  updateInvertedLabel()
}

function toggleSizeMode() {
  document.documentElement.classList.toggle('size-mode-relative')
  updateSizeModeLabel()
  updateComputedValueLabels()
  setTimeout(updateComputedValueLabels, 10)
}



let pointerMoveLine = null

function togglePointerLine(on) {
  document.removeEventListener("mousemove", movePointerLine)
  document.removeEventListener("mousedown", pointerLineMouseDown)
  document.removeEventListener("mouseup",   pointerLineMouseUp)
  if (on) {
    if (!pointerMoveLine) {
      pointerMoveLine = document.createElement('div')
      pointerMoveLine.className = 'pointerMoveLine'
      document.body.appendChild(pointerMoveLine)
    }
    document.addEventListener("mousemove", movePointerLine)
    document.addEventListener("mousedown", pointerLineMouseDown)
    document.addEventListener("mouseup",   pointerLineMouseUp)
    pointerMoveLine.classList.add("active")
  } else if (pointerMoveLine) {
    pointerMoveLine.classList.remove("active")
  }
}

function pointerLineMouseDown() {
  pointerMoveLine.classList.add("pressed")
}

function pointerLineMouseUp() {
  pointerMoveLine.classList.remove("pressed")
}

function movePointerLine(ev) {
  let y = ev.pageY + (baseline / 4)
  y = y - y % (baseline / 2)
  pointerMoveLine.style.transform = `translate3d(0,${y-0.5}px,0)`
}


bindTapableOption('debug-mode', toggleDebugMode)
bindTapableOption('base-grid', toggleBaseGrid)
bindTapableOption('inverted', toggleInvertedMode)
bindTapableOption('size-mode', toggleSizeMode)

function handleKeyPress(key) {
  switch (key) {
    case "d": case "D":  toggleDebugMode();    return true
    case "g": case "G":  toggleBaseGrid();     return true
    case "i": case "I":  toggleInvertedMode(); return true
    case "s": case "S":  toggleSizeMode();     return true
  }
  return false
}

document.addEventListener('keypress', ev => {
  if (!ev.metaKey && !ev.ctrlKey && !ev.altKey && handleKeyPress(ev.key)) {
    ev.preventDefault()
    ev.stopPropagation()
  }
}, {passive:false, capture:true})


let resizeTimer = null
window.addEventListener('resize', ev => {
  if (resizeTimer === null) {
    resizeTimer = setTimeout(() => {
      resizeTimer = null
      updateComputedValueLabels()
    }, 100)
  }
})


// main
updateDebugModeLabel()
updateBaseGridLabel()
updateInvertedLabel()
updateSizeModeLabel()

updateComputedValueLabels()

})();</script>
{% include analytics.html %}
</body>
</html>
